<template>
  <div class="app-container" v-loading="loading">
    <el-card class="box-card yy-data">
      <div slot="header" class="clearfix">
        <span>创客统计</span>
      </div>
      <el-radio-group v-model="radio" @change="handleRadioChange">
        <el-radio :label="1">今日</el-radio>
        <el-radio :label="2">昨天</el-radio>
        <el-radio :label="3">最近7天</el-radio>
        <el-radio :label="4">最近30天</el-radio>
        <el-radio :label="5">累计</el-radio>
      </el-radio-group>
      <el-form :inline="true" label-width="80px">
        <el-row>
          <el-col :lg="1">
            <el-form-item label=" "></el-form-item>
          </el-col>
          <el-col :lg="2">
            <el-form-item label="">创客人数</el-form-item>
          </el-col>
          <el-col :lg="2">
            <el-form-item label="">张数</el-form-item>
          </el-col>
          <el-col :lg="2">
            <el-form-item label="">总额</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :lg="1">
            <el-form-item label=""><strong>总计</strong></el-form-item>
          </el-col>
          <el-col :lg="2">
            <el-form-item label="">{{makerStatistics.totalMaker}}</el-form-item>
          </el-col>
          <el-col :lg="2">
            <el-form-item label="">{{makerStatistics.totalSheet}}</el-form-item>
          </el-col>
          <el-col :lg="2">
            <el-form-item label="">{{makerStatistics.totalAmount|currencyFilter}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :lg="1">
            <el-form-item label="">线上</el-form-item>
          </el-col>
          <el-col :lg="2">
            <el-form-item label="">{{makerStatistics.onLineMaker}}</el-form-item>
          </el-col>
          <el-col :lg="2">
            <el-form-item label="">{{makerStatistics.onLineSheet}}</el-form-item>
          </el-col>
          <el-col :lg="2">
            <el-form-item label="">{{makerStatistics.onLineAmount|currencyFilter}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :lg="1">
            <el-form-item label="">线下</el-form-item>
          </el-col>
          <el-col :lg="2">
            <el-form-item label="">{{makerStatistics.offLineMaker}}</el-form-item>
          </el-col>
          <el-col :lg="2">
            <el-form-item label="">{{makerStatistics.offLineSheet}}</el-form-item>
          </el-col>
          <el-col :lg="2">
            <el-form-item label="">{{makerStatistics.offLineAmount|currencyFilter}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="box-card" style="margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span>图表统计</span>
      </div>

      <el-form :inline="true" label-width="80px">
        <el-form-item label="日期">
          <el-date-picker
            v-model="daterange"
            type="daterange"
            align="right"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="渠道">
          <el-select v-model="queryParams.source" placeholder="不限" clearable size="small">
            <el-option
              v-for="dict in sourceOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="queryParams.role" placeholder="不限" clearable size="small">
            <el-option
              v-for="dict in roleOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-row>
          <el-form-item label="地区">
            <el-cascader
              placeholder="不限"
              ref="areaCascader"
              @change="cascaderChange"
              :options="options"
              :props="{checkStrictly: true }"
              v-model="selectIds"
              clearable>
            </el-cascader>
          </el-form-item>
          <el-form-item>
            <el-tag
              style="margin-right: 5px;"
              :key="tag.id"
              v-for="tag in dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleTagClose(tag)"
            >
              {{tag.name}}
            </el-tag>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          </el-form-item>
        </el-row>

        <el-form-item label=" ">
          <el-radio v-model="queryParams.type" @change="handleTypeChange" label="1" border>创客总数</el-radio>
          <el-radio v-model="queryParams.type" @change="handleTypeChange" label="2" border>创客张数</el-radio>
          <el-radio v-model="queryParams.type" @change="handleTypeChange" label="3" border>总金额</el-radio>
        </el-form-item>
      </el-form>

      <line-chart :chart-data="lineChartData"/>
    </el-card>

  </div>
</template>

<script>
  import {statisticsData, graphicList, graphicAreaList} from "@/api/maker/statistics";
  import LineChart from "@/components/LineChart";
  import {area} from "@/utils/area";

  export default {
    components: {
      LineChart
    },
    data() {
      return {
        radio: 1,
        lineChartData: {},
        level: 0,
        daterange: [],
        loading: false,
        makerStatistics: {},
        options: undefined,
        dynamicTags: [],
        pickerOptions: {
          shortcuts: [{
            text: '最近7天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近30天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近60天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
              picker.$emit('pick', [start, end]);
            }
          }],
          disabledDate(time) {
            return time.getTime() >= Date.now()
          }
        },
        selectIds: [],
        sourceOptions: undefined,
        roleOptions: undefined,
        queryParams: {
          source: undefined,
          role: undefined,
          type: '1'
        }
      };
    },
    created() {
      this.getDicts("yy_maker_source").then(response => {
        this.sourceOptions = response.data;
      });
      this.getDicts("yy_user_role").then(response => {
        this.roleOptions = response.data;
      });
      /*statisticsData().then(response => {
        this.makerStatistics = response.data;
      });*/
      this.getStatistics(1);
      area().then(res => {
        this.options = res;
      });
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
      this.daterange = [start, end];
      this.getList();
    },
    methods: {
      getStatistics(recently) {
        this.loading = true;
        statisticsData({recently: recently}).then(response => {
          console.log(response);
          this.makerStatistics = response.data;
          this.loading = false;
        });
      },
      getList() {
        this.loading = true;
        graphicList(this.queryParams).then(response => {
          let xAxis = [];
          let data = [];
          let legend;

          let key;
          let unit;
          if (this.queryParams.type === '1') {
            legend = ['全国创客总数'];
            key = 'member';
            unit = '人';
          } else if (this.queryParams.type === '2') {
            legend = ['全国创客张数'];
            key = 'number';
            unit = '张';
          } else {
            legend = ['全国创客总金额'];
            key = 'totalamount';
            unit = '元';
          }
          let sum = 0;
          for (let i = 0; i < response.data.length; i++) {
            data.push(response.data[i][key]);
            xAxis.push(response.data[i].days);
            sum += response.data[i][key];
          }
          legend[0] = legend[0] + '(' + sum + unit + ')';
          this.lineChartData = {
            xAxis: xAxis,
            data: [data],
            legend: legend,
            unit: unit
          };
          this.loading = false;
        });
      },
      handleTagClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        console.log(this.dynamicTags);
        if (this.dynamicTags.length === 0) {
          this.level = 0;
        }
      },
      handleQuery() {
        if (this.daterange.length > 0) {
          this.queryParams.startTime = this.daterange[0];
          this.queryParams.endTime = this.daterange[1];
        } else {
          this.queryParams.startTime = null;
          this.queryParams.endTime = null;
        }

        this.queryParams.areaIds = this.dynamicTags;
        if (this.queryParams.areaIds.length !== 0) {
          this.queryParams.level = this.level;
          this.areaList();
        } else {
          this.getList();
        }
      },
      handleTypeChange() {
        this.handleQuery();
      },
      areaList() {
        this.loading = true;
        graphicAreaList(this.queryParams).then(response => {
          let legend = [];
          let dataList = [];
          let xAxis = [];
          let sumList = [];
          for (let i in response.data) {
            let key;
            if (this.queryParams.type === '1') {
              legend.push(i + '创客总数');
              key = 'member';
            } else if (this.queryParams.type === '2') {
              legend.push(i + '创客张数');
              key = 'number'
            } else {
              legend.push(i + '创客总金额');
              key = 'totalamount'
            }
            xAxis = [];
            let data = [];
            let sum = 0;
            for (let j = 0; j < response.data[i].length; j++) {
              data.push(response.data[i][j][key]);
              xAxis.push(response.data[i][j].days);
              sum += response.data[i][j][key];
            }
            sumList.push(sum);
            dataList.push(data);
          }
          let unit;
          if (this.queryParams.type === '1') {
            unit = '人';
          } else if (this.queryParams.type === '2') {
            unit = '张';
          } else {
            unit = '元';
          }
          for (let i = 0; i < sumList.length; i++) {
            legend[i] = legend[i] + '(' + sumList[i] + unit + ')';
          }
          this.lineChartData = {
            xAxis: xAxis,
            data: dataList,
            legend: legend,
            unit: unit
          };
          this.loading = false;
        });
      },
      handleRadioChange(index) {
        console.log(index);
        this.getStatistics(index);
      },
      cascaderChange(value) {
        console.log(value);
        let node = this.$refs.areaCascader.getCheckedNodes()[0];
        let localLevel = this.level;
        if (node) {
          if (localLevel === 0) {
            this.level = node.level;
          }
          if (this.dynamicTags.length > 0 && localLevel !== node.level) {
            this.msgInfo('请选择同一层级的地区进行对比');
            return;
          }
          if (this.dynamicTags.length >= 4) {
            this.msgInfo('只能选择四个地区进行数据对比');
          } else {
            for (let i = 0; i < this.dynamicTags.length; i++) {
              if (this.dynamicTags[i].id === node.value) {
                this.msgInfo('当前地区已经选择,请选择其它地区对比');
                return;
              }
            }
            this.dynamicTags.push({id: node.value, name: node.label});
          }
        } else {
          this.level = 0;
        }
        this.selectIds = [];
      }
    }
  };
</script>
<style lang="scss" scoped>
  .yy-data .el-form-item {
    margin-bottom: 0;
  }
</style>

